<template>
    <div class="mui-content">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div>
                        <input name="userid" type="text" v-model="userid" placeholder="用户名是Hsc">
                        <input name="password" type="password" v-model="password" placeholder="密码是hsc">
                    </div>
                    <div>
                        <button class="login-btn" @click.stop="doLogin">登录</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

</template>

<script>
    import cookie from '../../util/cookie.js';
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                userid: 'Hsc',
                password: 'hsc'
            }
        },
        created() {
        },
        methods: {
            doLogin() {
                this.$http.post('/login', JSON.stringify({
                    'userid': this.userid,
                    'password': this.password
                })).then(data => {
                    if (data.body.status === 0) {
                        this.userid = '';
                        this.password = '';
                        cookie.setCookie('token', data.body.data.token, 7);
                        this.$emit("signin",);
                    } else if (data.body.status === 1) {
                        Toast(data.body.message);
                    }
                }).catch(data => {
                    Toast('请求超时，请检查您的网络');
                });
            }
        },
        components: {
        }
    }
</script>


<style lang="scss" scoped>
    .mui-card {
        border: 0;
        outline: none;
        box-shadow: none !important;
    }

    .login-btn {
        width: 100%;
        height: 40px;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        background: #006cf8;
        transition: 0s;
    }

    .login-btn:active {
        background: #010ebd;
    }
</style>